import React from 'react'
import PropTypes from 'prop-types'
import {Avatar, Badge, Modal, Table} from 'antd'
import classnames from 'classnames'
import {randomColor} from 'config'
import {DropOption} from 'components'
import AnimTableBody from 'components/DataTable/AnimTableBody'
import styles from './List.less'

const {confirm} = Modal

const List = ({
                onDeleteItem, onLeaveItem, onEditItem, showQrCode, isMotion, location, ...tableProps
              }) => {

  const handleMenuClick = (record, e) => {
    if (e.key === 'edit') {
      onEditItem(record)
    } else if (e.key === 'view') {
      onEditItem(record, true)
    } else if (e.key === 'leave') {
      confirm({
        title: '确定将该员工设置为离职吗?',
        okText: '确定',
        cancelText: '取消',
        onOk () {
          onLeaveItem(record.id)
        },
      })
    } else if (e.key === 'delete') {
      confirm({
        title: '您确定要删除这条数据吗?',
        okText: '确定',
        cancelText: '取消',
        onOk () {
          onDeleteItem(record.id)
        },
      })
    }
  }

  const getAvatarText = (realName) => {
    return realName ? realName.substr(realName.length - 1, realName.length) : ""
  }


  const statusMap = ['success', 'error', 'error']
  const status = ['正常', '删除', '离职']

  const columns = [
    {
      title: '头像',
      dataIndex: 'realname',
      key: 'avatar',
      width: 60,
      render: (realname, record, index) => <Avatar style={{backgroundColor: randomColor(index), verticalAlign: 'middle'}} size="large">{getAvatarText(realname)}</Avatar>,
    }, {
      title: '员工工号',
      dataIndex: 'sn',
      key: 'sn',
      width: 100,
    }, {
      title: '员工姓名',
      dataIndex: 'realname',
      key: 'realname',
      width: 100,
      render: (name, record) => <a href="javascript:;" onClick={(e) => {
        e.key = 'view'
        handleMenuClick(record, e)
      }}>{name}</a>,
    }, {
      title: ' 登陆用户名',
      dataIndex: 'username',
      key: 'username',
      width: 120,
    }, {
      title: '设备码',
      dataIndex: 'qrCode',
      key: 'qrCode',
      width: 100,
      render: val => <a href="javascript:;" onClick={() => showQrCode(val)}>绑定设备</a>
      // render: (value, record) => value ? value : <a href="javascript:;" onClick={() => showQrCode(record.qrCode)}>绑定设备</a>
    }, {
      title: '所在部门',
      dataIndex: 'dept',
      key: 'dept',
      width: 100,
      render: dept => dept ? dept.name : "-",
    }, {
      title: '角色',
      dataIndex: 'role',
      key: 'role',
      width: 100,
      render: role => role ? role.name : "-",
    }, {
      title: '状态',
      dataIndex: 'status',
      width: 100,
      filters: [
        {
          text: status[0],
          value: 0,
        },
        {
          text: status[2],
          value: 2,
        },
      ],
      onFilter: (value, record) => record.status.toString() === value,
      render (val) {
        return <Badge status={statusMap[val]} text={status[val]}/>
      },
    }, {
      title: '登录次数',
      dataIndex: 'loginCount',
      key: 'loginCount',
      width: 80,
      render (val) {
        return val ? val : 0
      },
    }, {
      title: '最后登录时间',
      dataIndex: 'lastLoginAt',
      key: 'lastLoginAt',
      width: 170,
    }, {
      title: '操作',
      key: 'operation',
      width: 100,
      fixed: 'right',
      render: (text, record) => {
        return <DropOption onMenuClick={e => handleMenuClick(record, e)}
                           menuOptions={[{key: 'edit', name: '编辑'}, {key: 'leave', name: '离职'}, {
                             key: 'delete',
                             name: '删除',
                           }]}/>
      },
    },
  ]

  const AnimateBody = (props) => {
    return <AnimTableBody {...props} />
  }

  const CommonBody = (props) => {
    return <tbody {...props} />
  }

  return (
    <Table
      {...tableProps}
      className={classnames(styles.table, {[styles.motion]: isMotion})}
      scroll={{x: 1500}}
      columns={columns}
      simple
      rowKey={record => record.id}
      components={{
        body: {wrapper: isMotion ? AnimateBody : CommonBody},
      }}
    />
  )
}

List.propTypes = {
  onDeleteItem: PropTypes.func,
  onEditItem: PropTypes.func,
  isMotion: PropTypes.bool,
  location: PropTypes.object,
}

export default List
